<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/template.xhtml">


        <ui:define name="title">
            <h:outputText value="OBJETIVOS ESTRATEGICOS"></h:outputText>
        </ui:define>

        <ui:define name="body">
            <h:form id="ObjetivoestrategicoListForm">                
                <p:growl id="growl" showDetail="true" sticky="true" />
                <p:panel header="OBJETIVOS ESTRATEGICOS">
                    <p:dataTable id="datalist" 
                                 value="#{objetivoestrategicoController.items}" 
                                 var="item"
                                 selectionMode="single" 
                                 selection="#{objetivoestrategicoController.selected}"
                                 paginator="true"
                                 rowKey="#{item.idObjetivoEstrategico}"
                                 rows="10"
                                 rowsPerPageTemplate="10,20,30,40,50"
                                 >

                        <p:ajax event="rowSelect"   update="createButton viewButton editButton deleteButton"/>
                        <p:ajax event="rowUnselect" update="createButton viewButton editButton deleteButton"/>

                        <p:column style="width:16px">
                            <p:rowToggler />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="CODIGO"/>
                            </f:facet>
                            <h:outputText value="#{item.idObjetivoEstrategico}"/>
                        </p:column>                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="PERSPECTIVA"/>
                            </f:facet>
                            <h:outputText value="#{item.idPerspectiva.nombre}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="NOMBRE"/>
                            </f:facet>
                            <h:outputText value="#{item.nombre}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="ESTRATEGIA GLOBAL"/>
                            </f:facet>
                            <h:outputText value="#{item.idEstrategiaGlobal.estrategia}"/>
                        </p:column>
                        <p:rowExpansion>
                            <h:panelGrid columns="1">
                                <p:dataTable var="meta" 
                                             value="#{item.objetivoestrategicoindicadorCollection}" 
                                             selectionMode="single"
                                             selection="#{objetivoestrategicoController.metaSeleccionada}"
                                             rowKey="#{meta.objetivoestrategicoindicadorPK}">
                                    <p:column headerText="META">
                                        <p:inputTextarea style="border: 0" readonly="true" cols="15" rows="1" value="#{meta.meta}" />
                                    </p:column>
                                    <p:column headerText="DEFINICION">
                                        <p:inputTextarea style="border: 0" readonly="true" cols="15" rows="1" value="#{meta.definicion}" />
                                    </p:column>
                                    <p:column headerText="ACLARACION">
                                        <p:inputTextarea style="border: 0" readonly="true" cols="15" rows="3" value="#{meta.aclaracion}" />
                                    </p:column>
                                    <p:column headerText="CONCPTUALIZACION">
                                        <p:inputTextarea style="border: 0" readonly="true" cols="15" rows="3" value="#{meta.conceptualizacion}" />
                                    </p:column>
                                    <p:column headerText="INDICADOR">
                                        <p:inputTextarea style="border: 0" readonly="true" cols="15" rows="1" value="#{meta.indicador.nombre}" />
                                    </p:column>
                                    <p:column headerText="FORMULA">
                                        <p:inputTextarea style="border: 0" readonly="true" cols="15" rows="3" value="#{meta.indicador.formula}" />
                                    </p:column>
                                    <p:column headerText="UNIDADES">
                                        <p:inputTextarea  style="border: 0" readonly="true" cols="15" rows="1" value="#{meta.indicador.unidades}" />
                                    </p:column>
                                    <p:column style="width:80px;text-align: center">
                                        <p:commandButton style="height: 75px;
                                                         width: 75px;
                                                         background-image: url(../img/fondo-boton.png);
                                                         background-size: 75px;
                                                         border-radius: 50px;
                                                         color:#ffffff"
                                                         action ="#{objetivoestrategicoController.evaluar()}"
                                                         update="" 
                                                         icon="ui-icon-pencil" title="Evaluar">
                                            <f:setPropertyActionListener value="#{meta}" target="#{objetivoestrategicoController.metaSeleccionada}" />
                                        </p:commandButton>
                                    </p:column>
                                </p:dataTable>
                            </h:panelGrid>
                        </p:rowExpansion>
                        <f:facet name="footer">
                            <p:commandButton style="height: 75px;
                                             width: 75px;
                                             background-image: url(../img/fondo-boton.png);
                                             background-size: 75px;
                                             border-radius: 50px;
                                             color:#ffffff"
                                             id="createButton" icon="ui-icon-plus"   title="Nuevo" actionListener="#{objetivoestrategicoController.preparaNuevo}" update=":ObjetivoestrategicoCreateForm" oncomplete="PF('ObjetivoestrategicoCreateDialog').show()"/>
                            <p:commandButton style="height: 75px;
                                             width: 75px;
                                             background-image: url(../img/fondo-boton.png);
                                             background-size: 75px;
                                             border-radius: 50px;
                                             color:#ffffff"
                                             id="viewButton"   icon="ui-icon-search" title="Ver"  update=":ObjetivoestrategicoViewForm" oncomplete="PF('ObjetivoestrategicoViewDialog').show()" disabled="#{empty objetivoestrategicoController.selected}"/>
                            <p:commandButton style="height: 75px;
                                             width: 75px;
                                             background-image: url(../img/fondo-boton.png);
                                             background-size: 75px;
                                             border-radius: 50px;
                                             color:#ffffff"
                                             id="editButton"   icon="ui-icon-pencil" title="Editar" actionListener="#{objetivoestrategicoController.preparaEdicion}" update=":ObjetivoestrategicoEditForm" oncomplete="PF('ObjetivoestrategicoEditDialog').show()" disabled="#{empty objetivoestrategicoController.selected}"/>
                            <p:commandButton style="height: 75px;
                                             width: 75px;
                                             background-image: url(../img/fondo-boton.png);
                                             background-size: 75px;
                                             border-radius: 50px;
                                             color:#ffffff"
                                             id="deleteButton" icon="ui-icon-trash"  title="Eliminar" actionListener="#{objetivoestrategicoController.destroy}" update=":growl,datalist" disabled="#{empty objetivoestrategicoController.selected}"/>
                        </f:facet>
                    </p:dataTable>
                </p:panel>
            </h:form>

            <ui:include src="Create.xhtml"/>
            <ui:include src="Edit.xhtml"/>
            <ui:include src="View.xhtml"/>
        </ui:define>
    </ui:composition>

</html>
